import React, { Component } from 'react'

import store from './store'

export default class Page2 extends Component {

    componentDidMount() {
        // 发送数据请求
        // XMLHttpRequest
        fetch('/banner/list')
            .then(res => res.json())
            .then(res => {
                // console.log(res.data);
                store.dispatch({
                    type: 'change_banner_list',
                    payload: res.data
                })
            })


        fetch('/pro/list')
            .then(res => res.json())
            .then(res => {
                // console.log(res.data);
                store.dispatch({
                    type: 'change_pro_list',
                    payload: res.data
                })
            })
    }

    render() {

        const bannerList = (<ul>
            {store.getState().pro.bannerList.map(item => {
                return (<li key={item.bannerid}>
                    <img style={{ width: 100 }} src={item.img} alt="" />
                </li>)
            })}
        </ul>)


        const proList = (<ol>
            {store.getState().pro.proList && store.getState().pro.proList.map(item => {
                return (<li key={item.proid}>
                    {item.proname}
                </li>)
            })}
        </ol>)

        return (
            <div>
                <h1>Page2 - {store.getState().app.count} </h1>

                {bannerList}

                {proList}

            </div>
        )
    }
}
